<template>
  <!-- 公用右侧编辑企业名称头部组件 -->
  <section class="edit-form-header">
    <el-form label-width="80px">
      <el-form-item label="企业名称"  :hide-required-asterisk="true">
        <el-input
        class="form"
          type="text"
          v-model="datas.enterpriseName"
          placeholder="请输入企业名称"
        />
      </el-form-item>
      <el-form-item label="主题色" class="theme-color-item">
        <ThemeColorSelector
          :isTitle="false"
          v-model="datas.customColor"
          :customColor="datas.customColor"
          :selected-color="selectedThemeColor"
          @color-change="handleThemeColorChange"
        >
          <template #customColor>
            <div class="custom-button-container">
              自定义
              <el-color-picker
                v-model="datas.customColor"
                show-alpha
                @change="handleCustomColorChange"
              ></el-color-picker>
            </div>
          </template>
        </ThemeColorSelector>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
// 引入主题色选择子组件
import ThemeColorSelector from "@/components/public/ThemeColorSelector/ThemeColorSelector.vue";
export default {
  name: "editFormheader",
  components: {
    ThemeColorSelector,
  },
  props: {
    datas: Object,
  },
  data() {
    return {
      selectedThemeColor: "#1890ff",
      // customColor: "",
    };
  },
  mounted() {
  },
  methods: {
    // 自定义主题色组件回调  整个中间预览区相关组件的颜色
    handleCustomColorChange(color) {
      this.customColor = color;
      this.selectedThemeColor = null;
      if (color == null) {
        this.selectedThemeColor = "#1890ff";
      }
      console.log("子组件中自定义颜色", color, this.customColor);
    },
    // 主题色组件回调  整个中间预览区相关组件的颜色
    handleThemeColorChange(color) {
      console.log("子组件中主题色选择", color);
      this.selectedThemeColor = color;
      this.customColor = null;
    },
    tab(val, key, index) {
      console.log('点击了', val, key, index,this.tabType)
      for (let i in this.tabType) {
        if (key == i) {
          this.tabType[key] = true;
          this.$set(this.data, "tabType", key);
        } else {
          this.tabType[i] = false;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input--small .el-input__inner{
  border: 2px solid red !important;
}
section {
  // height: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}
.theme-color-item{
  margin-bottom: 0px !important;
}
</style>
